<style lang="less">
  @import './admin.less';
</style>
<template>
  <div class="layout">
    <Layout class="layout-main">
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              Item 1
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
              Item 2
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>
              Item 3
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>
              Item 4
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu theme="light" width="auto" @on-select="changeMenu">

            <template v-for="item in menuList">
              <MenuItem v-if="!item.children || item.children.length==0" :name="item.path">
                <Icon :type="item.menuIcon"></Icon>
                <span class="layout-text">{{ item.title }}</span>
              </MenuItem>

              <Submenu v-if="item.children && item.children.length >= 1" :name="item.path">
                <template slot="title">
                  <Icon :type="item.menuIcon"></Icon>
                  <span class="layout-text">{{ item.title }}</span>
                </template>
                <template v-for="child in item.children">
                  <MenuItem :name="child.path">
                    <Icon :type="child.menuIcon"></Icon>
                    <span class="layout-text">{{ child.title }}</span>
                  </MenuItem>
                </template>
              </Submenu>
            </template>

          </Menu>
        </Sider>


        <router-view></router-view>


      </Layout>
    </Layout>
  </div>
</template>
<script>
  export default {

    data() {
      return {
        menuList: []
      }
    },

    methods: {
      changeMenu(name) {

        this.$router.push({
          path: name
        });
      }
    },
    mounted() {
      this.menuList = JSON.parse(localStorage.getItem('user-permissionList-Tree'));
    },
    created() {

    }


  }
</script>
